<template>
  <ScalablePage>
    <div class="resolution">
      <!-- 水厂简介 -->
      <FirstLevelTitle text="水厂简介"></FirstLevelTitle>
      <div class="Introduction-picture">
        <div>
          <img src="@/assets/images/home-page/left/zuo2.png" alt="">
        </div>
        <p style=" color: #fff;font-size: 8px;line-height: 15px;">
        <p style="text-indent: 17px">
          长城水厂处理能力20万m³/d，工艺流程为：混凝 + 沉淀 + 过滤 + 消毒。
          采用以高效架凝沉淀池 + 翻板滤池为主体的净水工艺，该工艺净水效率高，
          占地面积少，适应我国北方冬季低温天气，对低温低浊水处理效果较好，是宁夏水处理行业中的首次成功应用。
        </p>
        <p style="text-indent: 17px">
          工程于2010年5月开工建设，2011年5月开始供水，工程为内蒙古上海庙能源化工基地、宁东能源化工基地煤化工园区C临河工业园、银川苏银产业园、银川兴庆区月牙湖乡提供生产、生活及生态用水，为周边地区的经济建设、生态环境和社会发展提供了充足的水源保障。
        </p>
        </p>
      </div>

      <!-- 水厂信息 -->
      <FirstLevelTitle text="水厂信息"></FirstLevelTitle>
      <div class="Water-plant-info">
        <div class="info-item-1">
          <p class="p2">当年供水量（万吨）</p>
          <p class="p1">{{ yearsData }}</p>
        </div>
        <div class="info-item-2">
          <p class="p2">当月供水量（万吨）</p>
          <p class="p1">{{ monthData }}</p>
        </div>
        <div class="info-item-3">
          <p class="p2">本周供水量（万吨）</p>
          <p class="p1">{{ weekSupplyWater }}</p>
        </div>
        <div class="info-item-4">
          <p class="p2">当日供水量（万吨）</p>
          <p class="p1">{{ dayData }}</p>
        </div>
      </div>

      <!-- 供水量统计 -->
      <div style="display: flex;">
        <div style="margin-right: 30px;">
          <secondary-title text="供水量统计" more="更多>>>"></secondary-title>
          <div>
            <p class="statistics-title">长城水务公司2019-2024年供水量（万方）</p>
            <div class="statistics">
              <div class="item-1">3528</div>
              <div class="item-2">3950</div>
              <div class="item-3">4587</div>
              <div class="item-4">5024</div>
              <div class="item-5">5301</div>
              <div class="item-6">5220</div>

              <div class="item-1-1">1622</div>
              <div class="item-2-1">1726</div>
              <div class="item-3-1">2481</div>
              <div class="item-4-1">2523</div>
              <div class="item-5-1">2577</div>
              <div class="item-6-1">2631</div>
            </div>
          </div>
        </div>
        <div>
          <!-- <img class="secondary-img" src="@/assets/images/home-page/left/zuo14.png" alt=""> -->
          <secondary-title text="数据统计"></secondary-title>

          <div class="data-statistics">
            <div>
              <div class="zuo15">
                <p>1</p>
              </div>
              <div class="zuo16">
                <p>3</p>
              </div>
              <div class="zuo17">
                <p>4</p>
              </div>
            </div>
            <div>
              <div class="zuo18">
                <p>1</p>
              </div>
              <div class="zuo19">
                <p>6</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </ScalablePage>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getWaterSupply, getWeekSupplyWaterAPI } from "@/utils/shuiwu/api";
import ScalablePage from "@/components/ScalablePage.vue"; // 引入组件
import { shortPolling } from "@/utils/Polling";
import { number } from "echarts";

const yearsData = ref("0");
const monthData = ref("0");
const dayData = ref("0");
const weekSupplyWater = ref("0");

onMounted(() => {
  // 获取时间
  function getCurrentYearMonth(): string {
    const date = new Date(); // 获取当前日期
    const year = date.getFullYear(); // 获取当前年份
    const month = (date.getMonth() + 1).toString().padStart(2, "0"); // 获取当前月份，并补零
    return `${year}-${month}`; // 返回 yyyy-MM 格式的字符串
  }
  //  查询类型 1 送水泵房总供水瞬时流量；2 送水泵房总供水当日累计流量；3 送水泵房总供水昨日累计流量 ；4 送水泵房总供水年累计流量；5 送水泵房总供水月累计流量

  // 获取当年供水量
  async function getNowYear() {
    const thoseYears = await getWaterSupply({ type: "4" });
    if (thoseYears.data.value) {
      yearsData.value = (thoseYears?.data.value / 10000).toFixed(2);
    }
  }

  // 获取当日供水量
  async function getWaterSupplyDay() {
    const thatDay = await getWaterSupply({ type: "2" });
    if (thatDay?.data.value) {
      dayData.value = (thatDay?.data.value / 10000).toFixed(2);
    }
  }

  // 获取当月供水量
  async function getWaterSupplyMonth() {
    const sameMonth = await getWaterSupply({
      type: "5",
      time: getCurrentYearMonth(),
    });
    if (sameMonth?.data.value) {
      monthData.value = (sameMonth?.data.value / 10000).toFixed(2);
    }
  }

  // 获取周供水量
  async function getWeekSupplyWater() {
    const weekData = await getWeekSupplyWaterAPI();
    if (weekData?.data[0]?.value) {
      console.log(weekData.data[0].value);
      weekSupplyWater.value = Number(weekData.data[0].value).toFixed(2);
    }
  }

  getNowYear()
  shortPolling(() => getWaterSupplyDay(), 10000);
  getWaterSupplyMonth()
  getWeekSupplyWater()
});
</script>

<style lang="less" scoped>
@import "@/assets/common/font.css";

.resolution {
  .First-img {
    width: 324px;
    height: 26px;
  }

  .secondary-img {
    width: 171px;
  }
}

.Introduction-picture {
  display: flex;
  margin: 20px 0;
  width: 100%;

  div {
    width: 200px;
    padding: 10px;
    margin-right: 20px;
    background-image: url("@/assets/images/home-page/left/zuo20.png");
    background-repeat: no-repeat;
    background-size: contain;

    img {
      width: 180px;
    }
  }
}

.Water-plant-info {
  margin-top: 20px;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;

  .info-item-1 {
    width: 112px;
    height: 100%;
    background-image: url("@/assets/images/home-page/left/zuo5.png");
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;

    .p1 {
      position: absolute;
      top: 16px;
      left: 32px;
      color: #fff;
    }

    .p2 {
      position: absolute;
      top: 3px;
      left: 29px;
      color: #1debec;
      font-size: 8px;
    }
  }

  .info-item-2 {
    width: 112px;
    height: 100%;
    background-image: url("@/assets/images/home-page/left/zuo6.png");
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;

    .p1 {
      position: absolute;
      top: 16px;
      left: 32px;
      color: #fff;
    }

    .p2 {
      position: absolute;
      top: 3px;
      left: 29px;
      color: #1debec;
      font-size: 8px;
    }
  }

  .info-item-3 {
    width: 112px;
    height: 100%;
    background-image: url("@/assets/images/home-page/left/zuo7.png");
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;

    .p1 {
      position: absolute;
      top: 16px;
      left: 32px;
      color: #fff;
    }

    .p2 {
      position: absolute;
      top: 3px;
      left: 29px;
      color: #1debec;
      font-size: 8px;
    }
  }

  .info-item-4 {
    width: 112px;
    height: 100%;
    background-image: url("@/assets/images/home-page/left/zuo8.png");
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;

    .p1 {
      position: absolute;
      top: 16px;
      left: 32px;
      color: #fff;
    }

    .p2 {
      position: absolute;
      top: 3px;
      left: 29px;
      color: #1debec;
      font-size: 8px;
    }
  }
}

.statistics {
  width: 264px;
  height: 115px;
  background-image: url("@/assets/images/home-page/left/zuo11.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  color: #fff;
  font-size: 8px;

  .item-1 {
    position: absolute;
    top: 43px;
    left: 31px;
  }

  .item-2 {
    position: absolute;
    top: 29px;
    left: 72px;
  }

  .item-3 {
    position: absolute;
    top: 19px;
    left: 113px;
  }

  .item-4 {
    position: absolute;
    top: 11px;
    left: 153px;
  }

  .item-5 {
    position: absolute;
    top: 6px;
    left: 193px;
  }

  .item-6 {
    position: absolute;
    top: 8px;
    left: 233px;
  }

  .item-1-1 {
    position: absolute;
    top: 74px;
    left: 47px;
  }

  .item-2-1 {
    position: absolute;
    top: 74px;
    left: 87px;
  }

  .item-3-1 {
    position: absolute;
    top: 59px;
    left: 127px;
  }

  .item-4-1 {
    position: absolute;
    top: 59px;
    left: 168px;
  }

  .item-5-1 {
    position: absolute;
    top: 58px;
    left: 209px;
  }

  .item-6-1 {
    position: absolute;
    top: 58px;
    left: 249px;
  }
}

.data-statistics {
  margin-top: 30px;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 8px;

  .zuo15 {
    width: 89px;
    height: 37px;
    background-image: url("@/assets/images/home-page/left/zuo15.png");
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;

    p {
      position: absolute;
      top: 21px;
      left: 45px;
    }
  }

  .zuo16 {
    width: 89px;
    height: 37px;
    background-image: url("@/assets/images/home-page/left/zuo16.png");
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;

    p {
      position: absolute;
      top: 21px;
      left: 45px;
    }
  }

  .zuo17 {
    width: 89px;
    height: 37px;
    background-image: url("@/assets/images/home-page/left/zuo17.png");
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;

    p {
      position: absolute;
      top: 21px;
      left: 45px;
    }
  }

  .zuo18 {
    width: 89px;
    height: 37px;
    background-image: url("@/assets/images/home-page/left/zuo18.png");
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;

    p {
      position: absolute;
      top: 22px;
      left: 45px;
    }
  }

  .zuo19 {
    width: 89px;
    height: 37px;
    background-image: url("@/assets/images/home-page/left/zuo19.png");
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;

    p {
      position: absolute;
      top: 22px;
      left: 45px;
    }
  }
}

.statistics-title {
  text-align: center;
  color: #00caff;
  font-family: YSBT;
  font-size: 10px;
  padding: 10px 0;
}
</style>